import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import MXThemeHeaderRCM from 'components/theme-header-rcm'
import MXTopRanking from 'components/top-ranking';
import { RankingWrapper } from './style'
import { getgetTopListAction } from '../../store/actionCreators';

const MXRecommendRanking = memo(() => {
  // redux hooks
  const { upRanking, newRanking, originRanking } = useSelector(state => ({
    upRanking: state.getIn(['recommend', 'upRanking']),
    newRanking: state.getIn(['recommend', 'newRanking']),
    originRanking: state.getIn(['recommend', 'originRanking']),
  }), shallowEqual)

  const dispatch = useDispatch()

  // other hooks
  useEffect(() => {
    dispatch(getgetTopListAction(0))
    dispatch(getgetTopListAction(2))
    dispatch(getgetTopListAction(3))
  }, [dispatch])

  return (
    <RankingWrapper>
      <MXThemeHeaderRCM title="榜单"/>
      <div className="tops">
        <MXTopRanking info={upRanking}/>
        <MXTopRanking info={newRanking}/>
        <MXTopRanking info={originRanking}/>
      </div>
    </RankingWrapper>
  );
});

export default MXRecommendRanking;